<template>
	<view class="content">
		<view class="search_box">
			<view class="search_input">
				<input class="search_we_in"  @confirm="onconfirm" @blur="onblur" :placeholder="placeholder" placeholder-style="font-size:28rpx; color:#bbb" type="text">
			</view>
			<view class="search_btn">搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"search",

		data() {
			return {
				placeholder:'三只松鼠'
			};
		},
		methods:{
			onconfirm(e){
				console.log(e);
			},
			onblur(e){
				console.log(e);
			},
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 108rpx;
		background: linear-gradient(to left,#B6359C , #EF0A6A);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 999;
	}
	.search_box{
		width: 690rpx;
		height: 65rpx;
		background: #FFFFFF;
		border: 1px solid #EF0E6C;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		
	}
	.search_input{
		width: 568rpx;
		height: 65rpx;
		position: relative;
	}
	.search_we_in{
		width: 568rpx;
		height: 65rpx;
		padding-left: 89rpx;
	}
	.search_we_in::before{
		content: '';
		width: 36rpx;
		height: 36rpx;
		background: url(../../static/imgs/search_icon.png) no-repeat;
		background-size: contain;
		position: absolute;
		left: 29rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.search_we_in::after{
		content: '';
		width: 32rpx;
		height: 29rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/camera.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}
	.search_btn{
		width: 122rpx;
		height: 65rpx;
		background: #EF0E6C;
/* 		border-top-right-radius: 32rpx;
		border-bottom-right-radius: 32rpx; */
		text-align: center;
		line-height: 65rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
	}

</style>